<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="add-bottons right" @click="uni.navigateBack({delta: 1});">
				返回
			</view>
		</view>
		
		<view class="goods-box left clearfix">
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">标题</uni-th>
					<uni-th align="left">{{data.title}}|{{data.en_title}}</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>分类</uni-td>
					<uni-td>{{data.category[0]}}-{{data.category[1]}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>商品介绍</uni-td>
					<uni-td>{{data.content}}<br>{{data.en_content}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>商品特色</uni-td>
					<uni-td>
						<view class="goods-tese left clearfix">
							<text v-for="(item,index) in data.feature">{{item}}</text>
							<text v-for="(item,index) in data.en_feature">{{item}}</text>
						</view>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>中文封面</uni-td>
					<uni-td>
						<image :src="data.poster" mode="aspectFill" style="width:960px;height:270px;"></image>
					</uni-td>
				</uni-tr>
			
				<uni-tr>
					<uni-td>英文封面</uni-td>
					<uni-td>
						<image :src="data.en_poster" mode="aspectFill" style="width:960px;height:270px;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>中文主图</uni-td>
					<uni-td>
						<image v-for="(item,index) in data.images" :src="item.fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>英文主图</uni-td>
					<uni-td>
						<image v-for="(item,index) in data.en_images" :src="item.fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>参数规格</uni-td>
					<uni-td><view v-html="data.spec"></view><view v-html="data.en_spec"></view></uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>技术说明</uni-td>
					<uni-td><view v-html="data.describe"></view><view v-html="data.en_describe"></view></uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>中文说明图</uni-td>
					<uni-td>
						<image :src="data.describe_image[0].fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>英文说明图</uni-td>
					<uni-td>
						<image :src="data.en_describe_image[0].fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>中文应用举例</uni-td>
					<uni-td>
						<image :src="data.example_image[0].fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>英文应用举例</uni-td>
					<uni-td>
						<image :src="data.en_example_image[0].fileID" mode="aspectFill" style="width:200px;height:200px;margin:20px;border:1px solid #eee;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>3D模型</uni-td>
					<uni-td>
						{{data.step_file}}
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td>SKU</uni-td>
					<uni-td>
						<uni-table>
							<uni-tr>
								<uni-th align="center">
									型号|model
								</uni-th>
								<uni-th align="center">
									规格|specs
								</uni-th>
								<uni-th align="center">
									工程图
								</uni-th>
								<uni-th align="center">
									单价|price
								</uni-th>
								<uni-th align="center">
									发货日期|delivery time
								</uni-th>
							</uni-tr>
							
							<uni-tr v-for="(item,index) in param">
								<uni-td align="center">
									{{item.model}}|{{item.en_model}}
								</uni-td>
								<uni-td align="center">
									{{item.spec}}|{{item.en_spec}}
								</uni-td>
								<uni-td align="center">
									工程图
								</uni-td>
								<uni-td align="center">
									{{item.price}}|{{item.en_price}}
								</uni-td>
								<uni-td align="center">
									{{item.delivery_time}}|{{item.en_delivery_time}}
								</uni-td>
							</uni-tr>
							
							
						</uni-table>
						
					</uni-td>
				</uni-tr>
				
				
				
			</uni-table>
		</view>
	</view>
</template>

<style>
	
	.goods-tese text{float:left;width:100%;line-height:30px;}
	.goods-tese{width:100%;}
	.goods-box{width:94%;min-height:500px;margin-left:3%;margin-top:50px;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"goods-detail",
		data() {
			return {
				param:[],//属性
				data:{},
				routes: [
				        {
				          to: "/A",
				          name: "商品管理",
				        },
				        {
				          to: "/B",
				          name: "商品详情",
				        }
				      ],
			};
		},
		created() {
			this.getDataById();
		},
		props:['id'],
		methods:{
			//根据id获取内容
			getDataById(){
				uni.showLoading({
					title:'加载中'
				})
				var id = this.id;
				db.collection('goods').where({_id:id}).get({getOne:true}).then(res=>{
					uni.hideLoading();
					var data = res.result.data;
					this.data = data;
					this.param = data.param;
				});
			}
		}
	}
</script>
